<template>
	<div class="container">
		<cl-crud @load="onLoad">
			<!-- 添加记录 -->
			<template #slot-add>
				<el-button
					size="mini"
					type="primary"
					@click="addRecord()"
					v-permission="$service.goodsMenagement.record.permission.add"
				>
					<i class="el-icon-plus"></i>添加记录
				</el-button>
			</template>
			<template #slot-filter>
				<div>
					<el-select
						size="mini"
						filterable
						placeholder="帐号筛选"
						v-model="accountFilter"
						style="margin-right: 1em;width:200px;"
						@change="val => crud.refresh({ appkey: val, page: 1 })"
					>
						<el-option value=" " label="全部"></el-option>
						<el-option
							v-for="item in accountFilterList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>

				<div>
					<el-select
						size="mini"
						filterable
						placeholder="活动类型"
						v-model="state"
						style="margin-right: 1em;width:120px;"
						@change="val => crud.refresh({ activityType: val, page: 1 })"
					>
						<el-option value="" label="全部"></el-option>
						<el-option label="百亿补贴" :value="1"></el-option>
						<el-option label="大转盘" :value="2"></el-option>
					</el-select>
				</div>
				<div class="nav base-flex" style="margin-right:10px">
					<div>
						<date-picker
							@change="
								val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
				</div>
			</template>
			<!-- 淘礼金信息 -->
			<template #table-column-info="{scope}">
				<div class="info">
					<p>
						标题：
						<span>{{ scope.row.tljName }}</span>
					</p>
					<p>
						总数：
						<span>{{ scope.row.totalNum }}</span>
					</p>
					<p>
						领取次数：
						<span>{{ scope.row.userTotal }}</span>
					</p>
					<p>
						单个金额：
						<span>￥{{ scope.row.perface }}元</span>
					</p>
					<p>
						创建类型：
						<span>{{ scope.row.type | typeFilter }}</span>
					</p>
					<p>
						开始时间：
						<span>{{ scope.row.startTime | dateFormatLine }}</span>
					</p>
					<p>
						结束时间：
						<span>{{ scope.row.endTime | dateFormatLine }}</span>
					</p>
				</div>
			</template>
			<!-- 商品信息 -->
			<template #table-column-goodsInfo="{scope}">
				<div class="goodsInfo-box">
					<div class="info-img">
						<a :href="scope.row.link" target="_black">
							<img :src="scope.row.pic | image_ali" alt="" />
						</a>
					</div>
					<div class="info">
						<div class="info-box" v-if="scope.row.link">
							<img
								:src="scope.row.productPicUrl"
								alt
								class="goodsInfo-img"
								v-if="scope.row.productPicUrl"
							/>
							<div class="title-box">
								<div class="name">
									<a
										:href="scope.row.link"
										target="_blank"
										class="titel"
										v-if="scope.row.title"
									>
										{{ scope.row.title }}
									</a>
									<i
										class="el-icon-copy-document"
										v-copy="scope.row.title"
										title="复制商品名称"
									></i>
								</div>

								<p class="shop" v-if="scope.row.shopName">
									{{ scope.row.shopName }}
								</p>
							</div>
						</div>
						<p>
							商品ID：{{ scope.row.gid }}
							<i
								class="el-icon-copy-document"
								v-copy="scope.row.gid"
								title="复制商品ID"
							></i>
						</p>
						<p>
							优惠券ID：{{ scope.row.activityId }}
							<i
								class="el-icon-copy-document"
								v-copy="scope.row.activityId"
								title="复制优惠券ID"
							></i>
						</p>
					</div>
				</div>
			</template>
			<!-- 任务时间 -->
			<template #table-column-taskTime="{scope}">
				<div class="info info-time">
					<div>
						<div v-if="scope.row.scheduleTime">
							定时时间：{{ scope.row.scheduleTime | dateFormatLine }}
						</div>
						<div v-else>定时时间：未设置</div>
					</div>

					<div>
						<div v-if="scope.row.updateTime">
							执行时间：{{ scope.row.updateTime | dateFormatLine }}
						</div>
						<div v-else>
							执行时间：未设置
						</div>
					</div>
					<div v-if="scope.row.newPerson == 1">
						<div>
							<div>免单开始时间：{{ scope.row.xrStartTime | dateFormatLine }}</div>
						</div>

						<div>
							<div>免单结束时间：{{ scope.row.xrEndTime | dateFormatLine }}</div>
						</div>
					</div>
				</div>
			</template>
			<!-- 表格行 复制淘口令 -->
			<template #table-column-tkl="{scope}">
				<div class="info">
					<p>
						{{ scope.row.tkl || '无' }}
						<i
							class="el-icon-copy-document"
							v-copy="scope.row.tkl"
							v-if="scope.row.tkl"
							title="复制淘口令"
						></i>
					</p>
				</div>
			</template>
			<!-- 创建时间 -->
			<template #table-column-createTime="{scope}">
				<div>{{ scope.row.createTime | dateFormatLine }}</div>
			</template>
			<!--  新人免单-->
			<template #slot-row-newPeople="{scope}">
				<div class="record-detail">
					<span
						style="color:red"
						@click="cancleNewPerson(scope.row)"
						v-if="scope.row.newPerson == 1"
						>取消新人免单</span
					>
					<span @click="newPeopleFree(scope.row)" v-else>设为新人免单</span>
				</div>
			</template>
			<!--  限时抢购-->
			<template #slot-row-flash-sale="{scope}">
				<div class="record-detail">
					<span v-if="toDayTime < scope.row.endTime" @click="setFlashSale(scope.row)"
						>设为限时抢购</span
					>
				</div>
			</template>
			<!--  限时抢购-->
			<template #slot-row-subsidy="{scope}">
				<div class="record-detail">
					<span
						style="color:red"
						@click="cancleSubsidy(scope.row)"
						v-if="scope.row.dayAllowanceStatus == 1"
						>取消百万补贴</span
					>
					<span @click="setSubsidy(scope.row)" v-if="scope.row.dayAllowanceStatus == 0"
						>设为百万补贴</span
					>
				</div>
			</template>
			<!--  社群淘礼金-->
			<!-- 是否下架 -->
			<template #table-column-recordStatus="{scope}">
				<div>
					<el-tag v-if="scope.row.isNine == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
<!--			是否抢完-->
			<template #table-column-unReceiveStatusNum2="{scope}">
				<div>
					<el-tag v-if="scope.row.unReceiveStatusNum > 0" type="success">未抢完</el-tag>
					<el-tag type="info" v-else>已抢完</el-tag>
				</div>
			</template>
			<!-- 跳转详情 -->
			<template #slot-row-tljdetail="{scope}">
				<div class="record-detail" v-if="scope.row.batchId">
					<span @click="batchIdDetail(scope.row)">查看详情</span>
				</div>
			</template>
			<!-- 操作 复制淘口令 -->
			<template #slot-row-copy="{scope}">
				<div class="copy">
					<el-tooltip :content="scope.row.tkl" placement="top">
						<el-button
							v-copy="scope.row.tkl"
							type="text"
							size="small"
							v-if="scope.row.tkl"
							>复制淘口令</el-button
						>
					</el-tooltip>
				</div>
			</template>
			<!-- 活动类型 -->
			<template #table-column-activityType="{scope}">
				<el-tag v-if="scope.row.activityType == 1">百亿补贴</el-tag>
				<el-tag v-else-if="scope.row.activityType == 2">大转盘</el-tag>
			</template>
		</cl-crud>
		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import moment from 'moment';
import DatePicker from '@/components/common/date-picker';
import { Type_TLJ, Task_Status } from '@/dict/index';
// eslint-disable-next-line
import searchCounpon from '../../components/list/searchCoupon';
import stores from '@/utils/store';

export default {
	data() {
		return {
			crud: null,
			state: '',
			options: {
				account: []
			},
			defNumMax: 1,
			memoryAccount: '',
			accountFilter: '',
			accountFilterList: []
		};
	},
	components: {
		// eslint-disable-next-line
		searchCounpon,
		DatePicker
	},

	created() {
		this.options.status = Task_Status;
	},

	computed: {
		toDayTime() {
			console.log(new Date().getTime() / 1000);
			return new Date().getTime() / 1000;
		}
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.record)
				.set('dict', {
					search: {
						query: 'status'
					},
					api: {
						delete: 'deleteByBatch'
					}
				})
				.set('tips', {
					delete: {
						confirm: '此操作会将本商品在新人免单列表删除，是否继续？',
						success: '取消成功',
						error: ''
					}
				})
				.set('upsert', {
					props: {
						width: '700px',
						labelWidth: '150px',
						center: true,
						'custom-class': 'custom-class-dialog'
					},
					items: [
						{
							component: {
								name: 'base-info',

								render() {
									return (
										<p style="margin-left: -120px;border-left:5px solid #FF4400;line-height: 16px;padding-left: 8px;">
											基础信息{' '}
											<span style="color:red">
												{' '}
												！
												淘礼金抓取需要1~n秒刷新页面即可看到新增商品(n=礼金个数)
											</span>
										</p>
									);
								}
							}
						},
						{
							prop: 'accountId',
							label: '账号',
							span: 13,
							component: {
								name: 'el-select',
								options: [],
								attrs: {
									placeholder: '请选择账号'
								},
								on: {
									change(val) {
										self.memoryAccount = val;
									}
								}
							},
							rules: {
								required: true,
								message: '账号不能为空'
							}
						},

						{
							prop: 'type',
							label: '创建类型',
							span: 10,
							value: 2,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择'
								},
								props: {
									clearable: true
								},
								options: Type_TLJ
							},
							rules: {
								required: true,
								message: '创建类型不能为空'
							}
						},
						{
							prop: 'pic',
							label: '商品主图：',
							span: 24,
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'title',
							label: '商品标题',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini'
								}
							}
						},
						{
							prop: 'url',
							props: {
								labelWidth: '0px'
							},
							// label: '优惠券链接：',
							component: {
								name: 'search-counpon',
								methods: {
									input(e) {
										this.$emit('input', e);
									},
									goodsInfo(e) {
										app.setForm('tljName', e.title.substring(0, 10));
									},
									perface(e) {
										app.setForm('perface', e);
									}
								},
								render() {
									return (
										<searchCounpon
											labelWidth="150"
											onInput={this.input}
											ongoodsInfo={this.goodsInfo}
											onperface={this.perface}
											item={self.enterGoodsInfo}></searchCounpon>
									);
								}
							},
							rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
						},
						{
							prop: 'tljName',
							label: '淘礼金名称',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入名称',
									clearable: true,
									maxlength: 10
								}
							},
							rules: [
								{
									required: true,
									message: '淘礼金名字不能为空'
								},
								{
									min: 5,
									max: 10,
									message: '淘礼金名字在5 ~ 10个字符之间'
								}
							]
						},
						{
							component: {
								name: 'setting',

								render() {
									return (
										<p style="margin-left: -120px;border-left:5px solid #FF4400;line-height: 16px;padding-left: 8px;">
											设置
										</p>
									);
								}
							}
						},
						{
							prop: 'totalNum',
							label: '淘礼金个数',
							span: 12,
							component: {
								name: 'el-input-number',
								props: {
									min: 0
								}
							},
							rules: {
								required: true,
								message: '总金额不能为空'
							}
						},
						{
							prop: 'userTotal',
							value: 1,
							label: '单用户最多领多少次',
							span: 12,
							component: {
								name: 'el-input-number',
								props: {
									min: 0
								}
							},
							rules: {
								required: true,
								message: '最多领取数量不能为空'
							}
						},
						{
							prop: 'perface',
							label: '单个淘礼金金额',

							// value: this.$store.getters.recordObj.perface,
							component: {
								name: 'el-input-number',
								props: {
									min: 1
								}
							},
							rules: {
								required: true,
								message: '单金额不能为空'
							}
						},
						{
							prop: 'activityType',
							label: '活动类型',
							span: 12,
							component: {
								name: 'el-select',
								props: {
									clearable: true
								},
								options: [
									// {
									// label: '百亿补贴',
									// value: 1
									// },
									{
										label: '大转盘',
										value: 2
									}
								]
							}
						},
						// {
						// 	prop: 'newPerson',
						// 	label: '是否新人专享',
						// 	component: {
						// 		name: 'el-switch'
						// 	}
						// },
						// {
						// 	prop: 'time',
						// 	label: '新人专享时间',
						// 	span: 24,
						// 	// value: [
						// 	// 	moment().format('YYYY-MM-DD HH:mm:ss'),
						// 	// 	moment()
						// 	// 		.add(1, 'day')
						// 	// 		.format('YYYY-MM-DD HH:mm:ss')
						// 	// ],
						// 	component: {
						// 		name: 'el-date-picker',
						// 		props: {
						// 			type: 'datetimerange',
						// 			'value-format': 'yyyy-MM-dd HH:mm:ss'
						// 		}
						// 	}
						// },
						{
							prop: 'startTime',
							label: '淘礼金开始时间',
							span: 14,
							component: {
								name: 'el-date-picker',
								props: {
									type: 'datetime',
									'value-format': 'yyyy-MM-dd HH:mm:ss'
								}
							},
							rules: [
								{
									required: true,
									message: '开始时间不能为空',
									trigger: 'blur'
								},
								{
									validator: (rules, value, callback) => {
										const h = app.getData('upsert.form.hour') || 0;

										if (
											moment(value)
												.add(h, 'hour')
												.isBefore(moment())
										) {
											callback(new Error('开始时间不能小于当前时间'));
										} else {
											callback();
										}
									}
								}
							]
						},
						{
							prop: 'hour',
							label: '持续时间（h）',
							span: 10,
							value: 24,
							component: {
								name: 'el-input-number',
								props: {
									min: 0
								}
							},
							rules: {
								required: true,
								message: '持续时间不能为空',
								trigger: 'blur'
							}
						},
						{
							prop: 'scheduleTime',
							label: '淘礼金创建时间',
							component: {
								name: 'el-date-picker',
								props: {
									type: 'datetime',
									'value-format': 'yyyy-MM-dd HH:mm:ss'
								}
							},
							rules: [
								{
									required: false,
									message: '定时时间不能为空'
								},
								{
									validator: (rules, value, callback) => {
										if (moment(value).isBefore(moment())) {
											callback(new Error('定时时间不能小于当前时间'));
										} else {
											callback();
										}
									}
								}
							]
						}
					],
					op: {
						layout: ['confirm']
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: '60'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							'min-width': 160,
							sortable: true
						},
						{
							label: '淘礼金信息',
							prop: 'info',
							align: 'left',
							'min-width': 250
						},
						{
							label: '商品信息',
							prop: 'goodsInfo',
							align: 'left',
							'min-width': 300
						},
						{
							label: '任务时间',
							prop: 'taskTime',
							align: 'center',
							'min-width': 250
						},
						{
							label: '联盟号',
							prop: 'account',
							align: 'center',
							width: 150
						},
						{
							label: '活动类型',
							prop: 'activityType',
							align: 'center',
							width: 110
						},
						{
							label: '是否下架',
							prop: 'recordStatus',
							align: 'center'
						},
						// {
						// 	label: '淘口令',
						// 	prop: 'tkl',
						// 	align: 'center',
						// 	'min-width': 130
						// },
						{
							label: '总数',
							prop: 'totalNum',
							align: 'center',
							'min-width': 100
						},
						{
							label: '剩余',
							prop: 'unReceiveStatusNum',
							align: 'center',
							'min-width': 100
						},
						{
							label: '已领取',
							prop: 'receiveStatusNum',
							align: 'center',
							'min-width': 100
						},
						{
							label: '生成成功',
							prop: 'statusSuccessNum',
							align: 'center',
							'min-width': 100
						},
						{
							label: '是否抢完',
							prop: 'unReceiveStatusNum2',
							align: 'center',
							'min-width': 100
						},
						{
							label: '生成中',
							prop: 'statusHandleNum',
							align: 'center',
							'min-width': 100
						},
						{
							label: '生成失败',
							prop: 'statusFailNum',
							align: 'center',
							'min-width': 100
						}
					],
					props: {
						'default-sort': {
							order: 'descending',
							prop: 'createTime'
						}
					},
					op: {
						layout: [
							'slot-row-tljdetail',
							'slot-row-newPeople',
							'slot-row-copy',
							'slot-row-flash-sale',
							'slot-row-subsidy',
							'slot-row-tljCommunity'
						]
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'slot-add',
						'flex1',
						'slot-filter',
						'slot-export',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let list = [];
					list = await this.$service.goodsMenagement.getTljAccountList.list();
					list = list.map(item => {
						return {
							label: item.account,
							value: item.appkey
						};
					});
					this.accountFilterList = list;
					next(params);
				})
				.on('open', async () => {
					let list = [];
					list = await this.$service.goodsMenagement.taobaoAccountTlj.userAccountList();
					list = list.map(item => {
						return {
							label: item.accountName,
							value: item.accountId
						};
					});
					this.crud.setForm(
						'totalNum',
						Math.floor(Math.random() * (10000 - 5000 + 1) + 5000)
					); // 随机设置淘礼金个数
					this.crud.setData('upsert.items[prop:accountId].component.options', list);
					if (stores.get('subsidyObj')) {
						app.setForm('accountId', stores.get('recordObj').accountId);
						app.setForm('totalNum', stores.get('recordObj').totalNum);
						app.setForm('userTotal', stores.get('recordObj').userTotal);
					} else {
						if (self.memoryAccount) {
							app.setForm('accountId', self.memoryAccount);
						} else {
							app.setForm('accountId', list[0].value);
						}
					}
					app.setForm(
						'startTime',
						moment(new Date().getTime() + 86400000).format('YYYY-MM-DD 00:00:00')
					);
				})
				.on('submit', (isEdit, data, { next }) => {
					let obj = {};
					obj.accountId = data.accountId;
					obj.totalNum = data.totalNum;
					obj.userTotal = data.userTotal;
					stores.set('recordObj', obj);
					let accid = data.accountId.split(':');
					next({
						...data,
						...data.url,
						endTime: moment(data.startTime)
							.add(data.hour, 'hour')
							.format('YYYY-MM-DD HH:mm:ss'),
						...app.getData('upsert.form.goodsInfo'),
						xrStartTime: data.time ? data.time[0] : '',
						xrEndTime: data.time ? data.time[1] : '',
						app: accid[0],
						accountId: accid[1]
						// newPerson: data.newPerson == 1 ? 1 : 0
					});
				})
				.on('delete', (selection, { next }) => {
					next({
						batchId: selection.map(e => e.batchId).join(','),
						gid: selection.map(e => e.gid).join(',')
					});
				})
				.done();

			app.refresh();
		},

		refresh(params) {
			this.crud.refresh(params);
		},
		// 添加记录
		addRecord() {
			this.crud.add();
		},
		// 查看批量详情
		batchIdDetail(item) {
			this.$emit('showdetail', item);
		},
		// 限时抢购
		setFlashSale(item) {
			console.log(item);
			const self = this;

			this.$refs['cl-form'].open({
				props: {
					'label-width': '130px',
					width: '800px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'gid',
						label: '商品ID：',
						span: 24,
						value: item.gid,
						component: <div>{item.gid}</div>
					},
					{
						prop: 'pic',
						label: '商品主图：',
						span: 24,
						value: item.pic,
						component: {
							name: 'cl-upload'
						}
					},
					{
						prop: 'title',
						label: '商品标题',
						span: 24,
						value: item.title,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					},

					{
						prop: 'mdMoney',
						label: '补贴金额：',
						value: 0,
						component: {
							name: 'mdMoney_c',
							data() {
								return {
									value2: 0,
									preCommission: ''
								};
							},
							created() {
								this.$service.goodsMenagement.goods
									.getPreCommission({
										endPrice: item.endPrice,
										commissionRate: item.commissconRate,
										tljMoney: item.perface
									})
									.then(res => {
										this.preCommission = res;
									});
							},
							methods: {
								Change(e) {
									this.$emit('input', e);
								}
							},

							render() {
								return (
									<div style="display:flex">
										<el-input-number
											max={
												Number(item.endPrice) -
													parseFloat(item.perface || 0) || 0
											}
											step={0.01}
											min={0}
											v-model={this.value2}
											onChange={this.Change}></el-input-number>
										<div style="margin-left:10px">
											淘礼金￥
											<span style="color:red">{item.perface}</span>元
										</div>
										<div style="margin-left:10px">
											到手价格￥
											<span style="color:red">
												{(
													parseFloat(item.endPrice || 0) -
													parseFloat(item.perface || 0) -
													(this.value2 ? this.value2 : 0)
												).toFixed(2)}
											</span>
											元
										</div>
										<div style="margin-left:10px">
											参考佣金￥
											<span style="color:red">{this.preCommission}</span>元
										</div>
									</div>
								);
							}
						},
						rules: [
							{
								required: true,
								message: '补贴金额不能为空'
							}
						]
					},
					{
						prop: 'total',
						label: '活动商品个数：',
						span: 8,
						value: item.unReceiveStatusNum,
						component: {
							name: 'el-input-number',
							attrs: {
								'controls-position': 'right',
								min: self.defNumMax,
								max: item.totalNum || 10000
							},
							on: {
								change(val) {
									self.defNumMax = val;
								}
							}
						},
						rules: [
							{
								required: true,
								message: '请输入活动商品数量',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'time',
						label: '活动时间：',
						span: 9,
						value: moment().format('YYYY-MM-DD HH:mm:ss'),
						component: {
							name: 'el-date-picker',
							attrs: {
								type: 'date',
								'value-format': 'yyyy-MM-dd'
							}
						},
						rules: [
							{
								required: true,
								message: '请选择活动时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: '_time',
						props: {
							'label-width': '0px'
						},
						span: 6,
						component: {
							name: 'el-select-s',
							data() {
								return {
									value2: localStorage.getItem('timevalue'),
									options: []
								};
							},
							created() {
								this.$service.goodsMenagement.goods.flashTime().then(res => {
									this.options = res.map(e => {
										return {
											label: e.time,
											value: e.time
										};
									});
									if (this.value2) {
										this.change(this.value2);
									}
								});
							},
							methods: {
								change(e) {
									localStorage.setItem('timevalue', e);
									Array.prototype.getArrayIndex = function(obj) {
										for (var i = 0; i < this.length; i++) {
											if (this[i].value === obj) {
												return i;
											}
										}
										return -1;
									};
									let end = '';
									if (this.options.getArrayIndex(e) + 1 == this.options.length) {
										end = '24:00';
									} else {
										end = this.options[this.options.getArrayIndex(e) + 1].value;
									}
									this.$emit('input', {
										start: e,
										end
									});
								}
							},
							render() {
								return (
									<el-select onChange={this.change} v-model={this.value2}>
										{this.options.map(item => {
											return (
												<el-option
													label={item.label}
													value={item.value}></el-option>
											);
										})}
									</el-select>
								);
							}
						},
						rules: [
							{
								required: true,
								message: '请选择活动时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'ysqLevel',
						label: '商品排序：',
						value: 100,
						component: {
							name: 'ysqlevels',
							data() {
								return {
									ysqLevel: 100
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.ysqLevel = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.ysqLevel}
											controls-position="right"
											onInput={this.input}
											min={1}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					},
					{
						prop: 'defNum',
						label: '预设抢购：',
						value: 0,
						component: {
							name: 'defNum-s',
							data() {
								return {
									value2: 0
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							watch: {
								value(val) {
									console.log(val);
									if (this.value2 >= val) {
										this.value2 = val;
									}
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.value2}
											controls-position="right"
											onInput={this.input}
											min={0}
											max={self.defNumMax}></el-input-number>
									</div>
								);
							}
						}
					}
				],
				on: {
					submit({ data, close }) {
						self.$service.goodsMenagement.goods
							.addFlashGoodsRecord({
								...data,
								mdStartTime: data.time + ' ' + data._time.start,
								mdEndTime: data.time + ' ' + data._time.end,
								url: item.link,
								couponUrl: item.couponUrl,
								tljBatchId: item.batchId,
								tljMoney: item.perface
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
		},
		// 百万补贴
		setSubsidy(item) {
			console.log(item);
			const self = this;

			this.$refs['cl-form'].open({
				props: {
					'label-width': '130px',
					width: '800px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'gid',
						label: '商品ID：',
						span: 24,
						value: item.gid,
						component: <div>{item.gid}</div>
					},
					{
						prop: 'pic',
						label: '商品主图：',
						span: 24,
						value: item.pic,
						component: {
							name: 'cl-upload'
						}
					},
					{
						prop: 'title',
						label: '商品标题',
						span: 24,
						value: item.title,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					},

					{
						prop: 'mdMoney',
						label: '补贴金额：',
						value: 0,
						component: {
							name: 'mdMoney_c',
							data() {
								return {
									value2: 0,
									preCommission: ''
								};
							},
							created() {
								this.$service.goodsMenagement.goods
									.getPreCommission({
										endPrice: item.endPrice,
										commissionRate: item.commissconRate,
										tljMoney: item.perface
									})
									.then(res => {
										this.preCommission = res;
									});
							},
							methods: {
								Change(e) {
									this.$emit('input', e);
								}
							},

							render() {
								return (
									<div style="display:flex">
										<el-input-number
											max={
												Number(item.endPrice) -
													parseFloat(item.perface || 0) || 0
											}
											step={0.01}
											min={0}
											v-model={this.value2}
											onChange={this.Change}></el-input-number>
										<div style="margin-left:10px">
											淘礼金￥
											<span style="color:red">{item.perface}</span>元
										</div>
										<div style="margin-left:10px">
											到手价格￥
											<span style="color:red">
												{(
													parseFloat(item.endPrice || 0) -
													parseFloat(item.perface || 0) -
													(this.value2 ? this.value2 : 0)
												).toFixed(2)}
											</span>
											元
										</div>
										<div style="margin-left:10px">
											参考佣金￥
											<span style="color:red">{this.preCommission}</span>元
										</div>
									</div>
								);
							}
						},
						rules: [
							{
								required: true,
								message: '补贴金额不能为空'
							}
						]
					},
					{
						prop: 'total',
						label: '活动商品总数：',
						span: 8,
						value: item.unReceiveStatusNum,
						component: {
							name: 'el-input-number',
							attrs: {
								'controls-position': 'right',
								min: self.defNumMax,
								max: item.totalNum || 10000
							},
							on: {
								change(val) {
									self.defNumMax = val;
								}
							}
						},
						rules: [
							{
								required: true,
								message: '请输入活动商品数量',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'time',
						label: '开始时间',
						span: 16,
						value: [
							moment().format('YYYY-MM-DD 00:00:00'),
							moment()
								.add(1, 'day')
								.format('YYYY-MM-DD 00:00:00')
						],
						component: {
							name: 'el-date-picker',
							props: {
								type: 'datetimerange',
								'value-format': 'yyyy-MM-dd HH:mm:ss'
							}
						},
						rules: [
							{
								required: true,
								message: '请选择淘礼金开始-结束时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'ysqLevel',
						label: '商品排序：',
						value: 100,
						component: {
							name: 'ysqlevels',
							data() {
								return {
									ysqLevel: 100
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.ysqLevel = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.ysqLevel}
											controls-position="right"
											onInput={this.input}
											min={1}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					},
					{
						prop: 'defNum',
						label: '预设抢购：',
						value: 0,
						component: {
							name: 'defNum-s',
							data() {
								return {
									value2: 0
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							watch: {
								value(val) {
									console.log(val);
									if (this.value2 >= val) {
										this.value2 = val;
									}
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.value2}
											controls-position="right"
											onInput={this.input}
											min={0}
											max={self.defNumMax}></el-input-number>
									</div>
								);
							}
						}
					}
				],
				on: {
					submit({ data, close }) {
						self.$service.goodsMenagement.goods
							.setAllowanceGoods({
								...data,
								startTime: data.time[0],
								endTime: data.time[1],
								url: item.link,
								couponUrl: item.couponUrl,
								tljBatchId: item.batchId,
								tljMoney: item.perface
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
		},
		// 取消补贴
		cancleSubsidy(item) {
			console.log(item);
			this.$service.goodsMenagement.mdGoods
				.cancelByBatchId({
					gid: item.gid,
					batchId: item.batchId,
					mdAllowanceGoodsId: item.mdAllowanceGoodsId,
					dayAllowanceStartTime: item.dayAllowanceStartTime,
					status: 2
				})
				.then(() => {
					this.$message({
						message: '取消成功',
						type: 'success'
					});
					this.crud.refresh();
					return;
				})
				.catch(err => {
					self.$message.error(err);
				});
		},
		cancleNewPerson(item) {
			this.$service.goodsMenagement.mdGoods
				.cancelByBatchId({
					gid: item.gid,
					batchId: item.batchId,
					mdNewPersonGoodsId: item.mdNewPersonGoodsId,
					dayAllowanceStartTime: item.dayAllowanceStartTime,
					status: 2
				})
				.then(() => {
					this.$message({
						message: '取消成功',
						type: 'success'
					});
					this.crud.refresh();
					return;
				})
				.catch(err => {
					self.$message.error(err);
				});
		},
		// 新人免单
		newPeopleFree(item) {
			console.log(item);
			const self = this;
			this.$refs['cl-form'].open({
				props: {
					'label-width': '90px',
					width: '600px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'gid',
						label: '商品ID：',
						span: 24,
						value: item.gid,
						component: <div>{item.gid}</div>
					},
					{
						prop: 'title',
						label: '商品标题：',
						span: 24,
						value: item.title,
						component: <div>{item.title}</div>
					},
					{
						prop: 'time',
						label: '开始时间',
						span: 24,
						value: [
							moment().format('YYYY-MM-DD HH:mm:ss'),
							moment()
								.add(1, 'day')
								.format('YYYY-MM-DD HH:mm:ss')
						],
						component: {
							name: 'el-date-picker',
							props: {
								type: 'datetimerange',
								'value-format': 'yyyy-MM-dd HH:mm:ss'
							}
						},
						rules: [
							{
								required: true,
								message: '请选择淘礼金开始-结束时间',
								trigger: 'blur'
							}
						]
					}
				],
				on: {
					submit({ data, close }) {
						self.$service.goodsMenagement.record
							.setNewPersonFreeGoods({
								...item,
								startTime: data.time[0],
								endTime: data.time[1],
								url: item.link,
								couponUrl: item.couponUrl,
								tljBatchId: item.batchId,
								tljMoney: item.perface
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
		},
	},
	filters: {
		// 解析创建类型
		typeFilter(val) {
			return Type_TLJ.filter(item => item.value == val)[0].label;
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
}
.info-time {
	text-align: left;
}
.goodsInfo-box {
	display: flex;
	align-items: center;
	width: 100%;
	.info-img {
		width: 94px;
		height: 94px;
		flex-shrink: 0;
		border-radius: 10px;
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
		}
	}
	// img {
	// 	width: 50px;
	// 	height: 50px;
	// 	/*border-radius: 50%;*/
	// 	flex-shrink: 0;
	// }
	.info {
		width: calc(100% - 100px);
		margin-left: 10px;
	}

	.info-box {
		margin: 10px 0;
		display: flex;
		align-items: center;
		.img-box {
			width: 500px;
			height: 500px;
			img {
				max-height: 100%;
				max-width: 100%;
			}
		}
		.title-box {
			flex: 1;
			height: 50px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow-x: hidden;
			.name {
				display: flex;
				align-items: center;
				a {
					font-size: 12px;
					width: 90%;
					color: $main-color;
					cursor: pointer;
					@include ellipsis(1);
				}
			}
		}
	}
}
.info {
	span {
		color: $main-color;
	}
	i {
		color: $main-color;
		cursor: pointer;
		font-size: 14px;
	}
}
.export {
	margin-right: 10px;
}
.record-detail {
	display: flex;
	justify-content: center;
	align-items: center;
	span {
		color: #4db7f3;
		border-radius: 50px;
		margin-bottom: 5px;
		cursor: pointer;
		display: block;
		padding: 4px 14px;
		transition: 0.3s;
		&:hover {
			opacity: 0.8;
		}
	}
}
::v-deep .el-dialog {
	.el-form {
		.el-col {
			.el-col-8 {
				.el-form-item__label {
					width: 120px !important;
				}
			}
		}
	}
}

::v-deep .el-select {
	margin-left: 10px;
}
</style>
